<!-- 柱状图 -->
<template>
	<div id="barchart">
		<!-- <div class="title"><p>{{title}}</p></div> -->
		<div ref="barchart"  :style="{height:height,width:width}"></div>
	</div>
</template>

<script>
export default {
  data() {
    return {};
  },
	props: {
		title: {
      type: String,
      default: '显示日统计趋势'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
	watch: {
    chartData: {
      deep: true,
      handler(val) {
        // this.setOptions(val)
				if(!val || val?.series?.length === 0){
					const dom = document.getElementById('barchart');
					dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
					dom.removeAttribute('_echarts_instance_');
				}else{
					this.setOptions(val)
				}
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
		this.myChart = this.$echarts.init(this.$refs.barchart, 'macarons')
		if(!this.chartData || this.chartData?.series?.length === 0){
			const dom = document.getElementById('barchart');
			dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
			dom.removeAttribute('_echarts_instance_');
		}else{
			this.setOptions(this.chartData)
		}
  },
	methods: {
		setOptions(chartData){
			this.myChart.setOption({
				xAxis: {
					type: 'category',
					data: chartData.xAxis
				},
				yAxis: {
					type: 'value'
				},
				tooltip: {
          trigger: "item",
					backgroundColor: '#fff',
					textStyle:{
            color:'#000'
          }
        },
				series: [
					{
						data: chartData.series,
						type: 'bar',
						barWidth : 50,
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#83bff6' },
								{ offset: 0.5, color: '#188df0' },
								{ offset: 1, color: '#188df0' }
							])
						}
					}
				]
			})
      this.myChart.off('click');
			this.myChart.on('click',  (params) => {
				this.$emit('barclick', params.name, this.title)
			});
		}
	}
};
</script>
<style scoped>
</style>